import vue from '@vitejs/plugin-vue'
// @路径插件
import path from 'path'
// 自动引入API
import AutoImport from 'unplugin-auto-import/vite'
// 自动引入组件
import Components from 'unplugin-vue-components/vite'
// Svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// ElementPlus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 获取环境变量
import { defineConfig,loadEnv } from "vite";

export default defineConfig(({ mode })=>{
	const env = loadEnv(mode, process.cwd())
	return {
		server: {
			// 端口
			port: 9001,
			// 跨域
			proxy: {
				'/api': {
				  target: env.VITE_BASE_URL,
				  changeOrigin: true,
				  rewrite: (path:string) => path.replace(/^\/api/, "")
				}
			}
		},
		plugins: [
			vue(),
			// 自动引入API
			AutoImport({
				include: [
					/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
					/\.vue$/,
					/\.vue\?vue/, // .vue
				],
				imports: ['vue', 'vue-router', 'pinia'],
				resolvers: [ElementPlusResolver()],
				dts: 'auto-imports.d.ts',
			}),
			// 全局引入组件
			Components({
				dirs: ['src/components'],
				dts: 'components.d.ts',
				resolvers: [ElementPlusResolver()],
			}),
			// 自动导入SVG
			createSvgIconsPlugin({
				// 需要自动导入的 svg 文件目录 (可自行修改)我的路径如下图所示
				iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
				// 执行icon name的格式 (可自行修改)
				symbolId: 'icon-[dir]-[name]',
			}),
		],
		css: {
			preprocessorOptions: {
				scss: {
					// 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了
					additionalData: '@import "@/style/index.scss";'
				}
			},
			postcss: {
				plugins: [

				],
			},
		},
		resolve: {
			alias: {
			  '@': path.resolve(__dirname, './src')
			}
		},
	}
})